<template>
  <div class="wrapper">
    <swiper :options='swiperOption' ref='mySwiper' v-if="showSwiper">
      <!-- slides -->
      <!-- <block > -->
        <swiper-slide v-for='item in this.swiperList' :key='item.id'><img class="swiper-img"  :src="item.imgUrl"/></swiper-slide>
      <!-- </block> -->
      <!-- Optional controls -->
      <div class='swiper-pagination' slot='pagination'></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: 'HomeSwiper',
  props: {
    swiperList: Array
  },
  data () {
    return {
      swiperOption: {
        // swiper options 所有的配置同swiper官方api配置
        autoplay: 3000,
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true
      }
      // swiperList: [
      //   {
      //     id: '0001',
      //     imgUrl:
      //       'http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg'
      //   },
      //   {
      //     id: '0002',
      //     imgUrl:
      //       'http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg'
      //   },
      //   {
      //     id: '0003',
      //     imgUrl:
      //       'http://img1.qunarzz.com/piao/fusion/1802/51/e78f936a5b404102.jpg_640x200_c14f0b3a.jpg'
      //   },
      //   {
      //     id: '0004',
      //     imgUrl:
      //       'http://img1.qunarzz.com/piao/fusion/1712/91/a275569091681d02.jpg_640x200_0519ccb9.jpg'
      //   }
      // ]
    }
  },
  computed: {
    showSwiper () {
      return this.swiperList.length
    }
  }
}
</script>
<style lang='stylus' scoped>
    .wrapper>>>.swiper-pagination-bullet-active
        background :#333 !important
    .wrapper
        height:0
        padding-bottom:31.25%
        overflow:hidden
        width:100%
        .swiper-img
            width:100%
</style>
